<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的产品</title>
  <style>
    ::-webkit-scrollbar {
      display: none;
    }

    html,
    body {

    }

    .el-container,
    .bottom {
      margin-top: 5px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 100%;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }

    .block {
      margin: auto;
    }

    .demo-table-expand {
      font-size: 0;
      width: 1500px;
    }
    .demo-table-expand label {
      width: 100px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }


  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<el-container id="app">
  <el-row >
    <span v-model="shopId">店铺号：{{shopId}}</span>
  </el-row>
  <el-row>
    <el-col :span="24">
      <template>
        <el-table :data="productList" style="width: 100%">
          <el-table-column label="产品id" prop="id"></el-table-column>
          <el-table-column label="产品名称" prop="name"></el-table-column>
          <el-table-column label="产品详情" prop="detail"></el-table-column>
          <el-table-column label="产品价格" prop="price">
            <template slot-scope="scope">
              <span>{{ scope.row.price }}元</span>
            </template>
          </el-table-column>
          <el-table-column label="产品图片" prop="imgSrc">
            <template slot-scope="scope">
              <el-image :src="scope.row.imgSrc" style="width: 50px;height: 50px"></el-image>
            </template>
          </el-table-column>
          <el-table-column
                  fixed="right"
                  label="操作"
                  width="300">
            <template slot-scope="scope">
              <el-button type="text" prop="id" @click.prevent="goToDetails(scope.row.id)" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

    </el-col>
  </el-row>
  <div class="block">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </div>


  <el-footer>
    <el-row></el-row>
  </el-footer>

</el-container>
<script>
  var shopShow = new Vue({
    el: "#app",
    data: {
      currentPage: 1,
      pageSize: 5,
      currentDate: new Date(),
      productList: [{
        id: '',
        name: '',
        price:'',
        detail: '',
        imgSrc: '',
        status:''
      }
      ],
      total: 10,
      shopId:''

    },
    methods: {
      initProductList() {
        console.log("初始化产品列表")
        let _this = this
        let id = JSON.parse(localStorage.getItem("shopId"));
        let params = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          shopId: id
        }
        $.post("/product/productList", params, function (data) {
          _this.productList = data.records;
          _this.currentPage = data.current;
          _this.pageSize = data.size;
          _this.total = data.total;
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        let _this = this
        let id = JSON.parse(localStorage.getItem("shopId"));
        let params = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          shopId: id
        }
        $.post("/product/productList", params, function (data) {
          _this.productList = data.records;
          _this.currentPage = data.current;
          _this.pageSize = data.size;
          _this.total = data.total;
        })
      }
      ,
      goToDetails(id) {
        console.log(id);
        location.href = "/product/selectProductById?productId=" + id
      }
    },
    created() {
      this.initProductList()
    }
  });
</script>
</body>
</html>